<!-- webkfa.com -->
<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" />
	<meta name="apple-touch-fullscreen" content="YES" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="format-detection" content="telephone=no" />
	<title>js直接操作css3属性transition和webkitTransform实现动画</title>
  </head>
  
  <body>
  	<input type="button" value="往下" onclick="xia(100);"/>
  	<input type="button" value="往上" onclick="shang(0);"/>
    <div style="width:50px;height:50px;background:red;" id="webkfaid"></div>
    <div style="width:200px;height:200px;background:green;" ></div>
    <script type="text/javascript">
    	var obj=document.getElementById("webkfaid");
    	var w = document.getElementById("webkfaid").style.width;
    	function xia(sum){
    		
    		alert(obj.style.zindex);
    		obj.style.transition="-webkit-transform 500ms ease-out";
			obj.style.webkitTransform="translate(100px) scale(2)";
    	}
    	function shang(sum){
    		var w = document.getElementById("webkfaid").style.width;
    		obj.style.transition="-webkit-transform 500ms ease-in";
			obj.style.webkitTransform="scale(1)";
    	}
    </script>
  </body>
</html>
